window.AUI.customCompoents.define("aui-datatable", class extends window.AUI.BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
            setData(data) {
                var self = this;
                if (data && _.isArray(data) && data.length > 0) {
                    self.rows = data.map(function (v, index) {
                        var a = [];
                        self.rules.forEach(function (rule) {
                            if (rule.hasOwnProperty("value")) {
                                var item = rule.value(v);
                                if (item) {
                                    a.push(item);
                                } else {
                                    if (rule.hasOwnProperty("defaultval")) {
                                        a.push(rule.defaultval);
                                    } else {
                                        a.push("");
                                    }
                                }
                            }
                        });
                        return {
                            $index: index,
                            $item: v,
                            data: a
                        };
                    });
                } else {
                    console.error("datatable 设置data错误");
                }
            },
            setRules (rules) {
                this.rules = rules;
                this.keys = rules.map(function (v) {
                    return v.key;
                });
            },
            toggleLoading() {

            }
        };
    }
    _data() {
        var ret = {};
        ret.rules = [];
        ret.rows = [];
        ret.keys = [];
        ret.rowcomponentname = "";
        return ret;
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
<div class="table-responsive">
    <table class="table table-striped ${self._name}__table">
        <thead>
            <tr>
                <th>#</th>
                <th v-for="key in keys" v-html="key"></th>
                <slot name="key"></slot>                        
            </tr>
        </thead>
        <tbody>
            <tr v-for="row,index in rows">
                <td>{{index + 1}}</td>
                <td v-for="item in row.data">
                    <div v-if="_.isString(item) || _.isNumber(item)" v-html="item"></div>
                    <div v-if="_.isObject(item)">
                        <component :is="item.componentname" :data="item"></component>
                    </div>
                </td>
                <td v-if="rowcomponentname">
                    <component :is="rowcomponentname" :data="row"></component>
                </td>    
            </tr>
            <slot name="append"></slot>           
        </tbody>      
    </table>    
   <div class="${self._name}__nodata" :aui-hidden="rows.length > 0">暂无数据</div>
</div>
</div>`;
    }
    static defineRules(rules) {
        var res = [];
        _.forEach(rules, function (rule, rulekey) {
            var k = {};
            if (_.isString(rule)) {
                k = {
                    key: rule
                }
            } else {
                k = rule;
                if (_.isFunction(rule.key)) {
                    k.key = rule.key()
                }
            }
            if(!k.value) {
                k.value = function (item) {
                    return item[rulekey]
                };
            }
            res.push(k);
        });
        return res;
    }
});